<template>
	<view class="home">
		<view class="content-item">
			<text>租金（元/月）</text>
			<view class="item-left">
				<uni-easyinput :inputBorder="false" type="number" trim="all" v-model="moneyValue" placeholder="请输入月租金"
					@input="input">
				</uni-easyinput>
			</view>
		</view>
		<view class="content-item">
			<text>房源类型</text>
			<view class="item-left">
				<uni-easyinput :inputBorder="false" trim="all" v-model="houseU" placeholder="请输入房源类型"
					@input="input">
				</uni-easyinput>
			</view>
		</view>
		<view class="content-item">
			<text>租凭方式</text>
			<view class="item-left">
				<radio-group style="display: flex;" @change="radioChange">
					<label style="display: flex;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
						:key="item.value">
						<view style="margin-left: 20px;">
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="content-item">
			<text>房屋朝向</text>
			<view class="item-left">
				<uni-data-select v-model="housePositionValue" :localdata="housePosition" @change="positionChange">
				</uni-data-select>
			</view>

		</view>
		<view class="content-item">
			<text>房屋面积</text>
			<view class="item-left">
				<uni-easyinput :inputBorder="false" trim="all" v-model="houseArea" placeholder="请输入房屋面积" @input="input">
				</uni-easyinput>
			</view>
		</view>
		<view class="content-item">
			<text>楼层</text>
			<view class="item-left">
				<uni-easyinput :inputBorder="false" trim="all" v-model="floor" placeholder="请输入房屋面积" @input="input">
				</uni-easyinput>
			</view>
		</view>
		<view class="content-item">
			<text>入住时间</text>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view>
					<text class="item-left" style="font-size: 28rpx;">{{date}}</text>
				</view>
			</picker>
			<text id="icon-you" class="iconfont icon-you"></text>
		</view>
		<view class="content-item-facilities">
			<view class="room-facilities">请选择房屋设施</view>
			<!-- {{JSON.stringify(checkbox)}} -->
			<view class="facilities">
				<view class="facilities-item">
					<uni-data-checkbox mode="button" multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
				</view>

				<view class="facilities-item-add" @click="inputDialogToggle">
					<span>
						<uni-icons type="plusempty" size="16"></uni-icons>
					</span><text>添加设施</text>
				</view>
				<view>
					<!-- 输入框示例 -->
					<uni-popup ref="inputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose" mode="input" title="添加设备" :value="facilitiesAdd"
							placeholder="请输入添加设备" @confirm="facilitiesAddConfirm"></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
		</view>

		<view class="content-item">
			<text>补充房屋信息</text>
		</view>
		<view class="content-item">
			<uni-easyinput :inputBorder="false" trim="all" v-model="houseMsg" placeholder="请输入补充房屋信息,如租期,装修情况/优惠等"
				@input="input">
			</uni-easyinput>
		</view>
		<view class="content-item" style="border-bottom: 0px;">
			<text>上传房屋图片</text>
		</view>
		<view class="house-item-msg">请上传房屋图片，最少上传1张，单张不超过1MB</view>

		<view class="house-item-img">
			<uni-file-picker :image-styles="imageStyles" limit="6"></uni-file-picker>
		</view>

		<view class="content-item">
			<text>房东信息</text>
			<uni-easyinput :inputBorder="false" trim="all" v-model="landlordMsg" placeholder="房东信息" @input="input">
			</uni-easyinput>
		</view>

		<view class="content-item">
			<text>手机号码</text>
			<uni-easyinput :inputBorder="false" trim="all" v-model="phone" placeholder="手机号码" @input="input">
			</uni-easyinput>
		</view>

		<view class="content-item">
			<text>微信</text>
			<uni-easyinput :inputBorder="false" trim="all" v-model="weixin" placeholder="请输入微信" @input="input">
			</uni-easyinput>
		</view>

		<view class="content-item">
			<text>邮箱</text>
			<uni-easyinput :inputBorder="false" trim="all" v-model="email" placeholder="输入邮箱地址" @input="input">
			</uni-easyinput>
		</view>

		<navigator url="/pages/myHouse/addHouse/addHouse" hover-class="navigator-hover">
			<button class="button" type="primary">
				<text class="button-text">确认发布</text>
			</button>
		</navigator>

	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				facilitiesAdd: "吊床",
				checkbox: [],
				hobby: [{
					text: '冰箱',
					value: "冰箱"
				}, {
					text: '洗衣机',
					value: '洗衣机'
				}, {
					text: '热水器',
					value: '热水器'
				}, {
					text: "床",
					value: "床"
				}, {
					text: "衣柜",
					value: "衣柜"
				}, {
					text: "智能门锁",
					value: '智能门锁'
				}, {
					text: "暖气",
					value: '暖气'
				}, {
					text: "电视机",
					value: '电视机'
				}, {
					text: "燃气灶",
					value: '燃气灶'
				}, {
					text: "宽带",
					value: '宽带'
				}, {
					text: "沙发",
					value: '沙发'
				}, {
					text: "油烟机",
					value: '油烟机'
				}, ],

				imageStyles: {
					width: 749,
					height: 168,
				},
				moneyValue: '',
				houseU:"中介",
				current: 0,
				housePositionValue: "",
				houseArea: "123m²",
				floor: "13层",
				houseMsg: "",
				landlordMsg: "",
				phone: '19981452206',
				weixin: "",
				email: "",
				items: [{
						value: '0',
						name: '整租',
						checked: 'true'
					},
					{
						value: '1',
						name: '合租'
					}

				],
				housePosition: [{
						value: 0,
						text: "东"
					},
					{
						value: 1,
						text: "南"
					},
					{
						value: 2,
						text: "西"
					},
					{
						value: 3,
						text: "北"
					},
					{
						value: 4,
						text: "其他"
					},
				],
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			facilitiesAddConfirm(v) {
				console.log(v);
				this.hobby.push({
					text: v,
					value: v
				})
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			input(e) {
				console.log('输入内容：', e);
			},
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			positionChange(e) {
				console.log("e:", e);
			}
		},
	}
</script>

<style lang="less">
	@import url("../../static/font/iconfont.css");

	.home {
		height: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.content-item {
			height: 110rpx;
			display: flex;
			align-items: center;
			border-bottom: 0.5px solid #cacaca;

			#icon-you {
				margin-right: -66px;
				position: absolute;
				right: 0;
			}

			text {
				width: 206rpx;
			}

			.item-left {
				flex: 1;
				display: flex;

			}

		}

		.house-item-msg {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 20px;
		}

		.house-item-img {
			width: 100%;
			height: 318rpx;
			background-color: #e4f0ff;

		}

		.content-item-facilities {
			display: flex;
			flex-direction: column;

			.room-facilities {
				height: 90rpx;
				line-height: 90rpx;
			}

			.facilities {
				display: flex;
				flex-wrap: wrap;

				.facilities-item {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
					margin-bottom: 20rpx;

					.uni-data-checkbox .checklist-group {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-around;
					}

				}

				.facilities-item-add {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
					width: 190rpx;
					height: 62rpx;
					font-size: 26rpx;
					border: 0.5px solid #cacaca;
				}
			}
		}

		button {
			margin-top: 20px;
			background-color: #0068e8;
		}
	}
</style>
